<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAddressList, deleteAddress } from '@/api/address'
import { onShow } from '@dcloudio/uni-app'

// 地址列表数据
const addressList = ref<any[]>([])


// 加载地址列表
const loadAddressList = async () => {
  try {
    const res = await getAddressList()
    addressList.value = res.data || []
  } catch (error) {
    uni.showToast({ title: '获取地址失败，请重试', icon: 'none' })
  }
}

// 删除地址
const handleDelete = async (id: number) => {
  const { confirm } = await uni.showModal({
    title: '确认删除',
    content: '删除后无法恢复，是否继续？'
  })
  if (!confirm) return

  try {
    await deleteAddress(id)
    uni.showToast({ title: '地址删除成功', icon: 'success' })
    loadAddressList() // 刷新列表
  } catch (error) {
    uni.showToast({ title: '删除失败，请重试', icon: 'none' })
  }
}

const handleEdit = (id: number) => {
  uni.navigateTo({
    url: `/pages/user/address/edit?id=${id}`
  })
}

function handleAdd(){
  uni.navigateTo({
    url: '/pages/user/address/add',
  })
}

// 页面加载时初始化数据
onMounted(() => {
  loadAddressList()
})

onShow(() => {
  loadAddressList() // 页面显示时刷新列表
})

const goBack = () => {
  uni.navigateBack()
}

</script>

<template>
  <view class="address-container">
    <!-- 顶部导航栏 -->
    <view class="custom-nav">
      <image class="nav-back-icon" src="/static/icon/back.png" mode="aspectFit" @click="goBack" />
      <view class="nav-back"></view>
      <!-- 中间标题 -->
      <text class="nav-title">我的地址</text>
      <!-- 右边留空 -->
      <view class="nav-placeholder"></view>
    </view>

    <!-- 添加地址按钮 -->
    <button class="add-btn" type="primary" @click="handleAdd">
      添加新地址
    </button>

    <!-- 地址列表 -->
    <view class="address-list">
      <view class="address-item" v-for="addr in addressList" :key="addr.id">
        <view class="address-info">
          <text class="region">{{ addr.province }} {{ addr.city }} {{ addr.area }}\n</text>
          <text class="detailed">{{ addr.detailed }}</text>
        </view>
        <view class="address-actions">
          <button class="edit-btn" @click="handleEdit(addr.id)">编辑</button>
          <button class="delete-btn" type="warn" @click="handleDelete(addr.id)">删除</button>
        </view>
      </view>
    </view>

    <!-- 无地址提示 -->
    <view class="empty-tip" v-if="addressList.length === 0">
      暂无地址，点击「添加新地址」开始管理
    </view>
  </view>
</template>

<style lang="scss" scoped>
.address-container {
  padding: 30rpx;
  min-height: 100vh;

  .add-btn {
    margin-bottom: 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
  }

  .address-list {
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;

    .address-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .address-info {
        flex: 1;
        margin-right: 30rpx;

        .region {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 16rpx;
        }

        .detailed {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }

      .address-actions {
        display: flex;
        gap: 20rpx;

        .edit-btn {
          width: 120rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 28rpx;
          background: #f5f5f5;
          color: #333;
        }

        .delete-btn {
          width: 120rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 28rpx;
        }
      }
    }
  }

  .empty-tip {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    margin-top: 100rpx;
  }
}

/* 新增顶部导航栏样式 */
.custom-nav {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  background: #fff;

  .nav-back-icon {
    width: 40rpx; // 调整返回图标大小
    height: 40rpx; // 调整返回图标大小
    margin-right: 10rpx; // 调整返回图标与标题之间的间距
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }

  .nav-placeholder {
    width: 60rpx; // 与左边返回区域宽度一致，保持布局对称
  }
}

/* 调整添加按钮的顶部间距，避免被导航栏遮挡 */
.add-btn {
  margin-top: 20rpx;
    margin-bottom: 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
  }

  .address-list {
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;

    .address-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .address-info {
        flex: 1;
        margin-right: 30rpx;

        .region {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 16rpx;
        }

        .detailed {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }

      .address-actions {
        display: flex;
        gap: 20rpx;

        .edit-btn {
          width: 120rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 28rpx;
          background: #f5f5f5;
          color: #333;
        }

        .delete-btn {
          width: 120rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 28rpx;
        }
      }
    }
  }

  .empty-tip {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    margin-top: 100rpx;
  }
</style>